import React from 'react';
import { LoadingOutlined } from '@ant-design/icons';

const PopupCom = (props) => {
  const { tooltip, featureItem } = props;
  const { windowWidth: width, windowHeight: height } = tooltip;
  const {
    properties: { url, text },
  } = featureItem;

  if (!url && !text) return null;

  // 提示框样式
  const getTooltipStyle = () => {
    const {
      borderColor,
      borderWidth,
      background: { type, backgroundColor, imageUrl },
    } = tooltip;
    const myBackground = type === 'color' ? { backgroundColor } : { backgroundImage: `url(${imageUrl})` };

    return {
      border: `${borderWidth}px solid ${borderColor}`,
      ...myBackground,
      padding: '5px',
      pointerEvents: 'all',
    };
  };
  return (
    <div style={{ position: 'relative' }}>
      {url ? (
        <>
          <div style={{ backgroundColor: 'rgba(0,0,0,0.2)', width, height, zIndex: -1, position: ' absolute' }}>
            <LoadingOutlined style={{ fontSize: '26px', lineHeight: `${height}px` }} />
          </div>
          <iframe
            style={{
              width,
              height,
              overflow: 'auto',
              border: 'none',
              pointerEvents: 'all',
            }}
            title={url}
            src={url}
          />
        </>
      ) : (
        <div style={getTooltipStyle()}>{text}</div>
      )}
    </div>
  );
};

export default PopupCom;
